<template>
    <div class="container">
        <h3 style="margin-bottom: 20px">{{particlePacking.breedName}}</h3>
        <el-form label-width="120px" class="demo-ruleForm">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="原料入库" name="原料入库">
                    <el-table
                        :data="tableData"
                        border
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                    >
                        <el-table-column prop="breedName" sortable label="名称"></el-table-column>
                        <el-table-column prop="inType" sortable label="入库类型"></el-table-column>
                        <el-table-column prop="inBatch" sortable label="进厂编号"></el-table-column>
                        <el-table-column prop="totalNum" sortable label="入库数量">
                            <template slot-scope="scope">
                                {{scope.row.totalNum}}{{scope.row.units}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="surplusNum" sortable label="剩余数量">
                            <template slot-scope="scope">
                                {{scope.row.surplusNum}}{{scope.row.units}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="lossNum" sortable label="报损数量">
                            <template slot-scope="scope">
                                {{scope.row.lossNum}}{{scope.row.units}}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    @click="handleView(scope.$index, scope.row)"
                                >查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="生产管理" name="生产管理">
                    <el-row class="demo-ruleForm">
                        <el-col :span="12">
                            <el-form-item label="产品类型：">
                                {{manufacture.materialType}}
                            </el-form-item>
                            <!-- <el-form-item label="规格：" v-if="ruleForm.materialType != '提取饮片'">
                                {{ruleForm.spec}}
                            </el-form-item> -->
                            <el-form-item label="生产日期：">
                                {{manufacture.time}}
                            </el-form-item>
                            <el-form-item label="生产负责人：">
                                {{manufacture.principalUser}}
                            </el-form-item>
                            <el-form-item label="生产批号：">
                                {{manufacture.batch}}
                            </el-form-item>
                            <el-form-item label="仓库：">
                                {{manufacture.warehouse}}
                            </el-form-item>
                            <!-- <el-form-item label="生产指令：">
                                {{ruleForm.directive}}
                            </el-form-item> -->
                            <el-form-item label="生产场景：" style="width:500px">
                                <span v-if="manufacture.sceneUrl == ''"></span>
                                <img v-else :src="$store.state.imageUrls+manufacture.sceneUrl" width="150" @click="handlecheck(manufacture.sceneUrl)" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="名称：">
                                {{manufacture.breedName}}
                            </el-form-item>
                            <!-- <el-form-item label="有效期至：">
                                {{manufacture.deadLine}}
                            </el-form-item> -->
                            <!-- <el-form-item label="生产相关人：">
                                {{manufacture.relevantUsers}}
                            </el-form-item> -->
                            <el-form-item label="生产工艺：">
                                {{manufacture.technique}}
                            </el-form-item>
                            <el-form-item label="实际产量：">
                                {{manufacture.totalNumber}}{{manufacture.units}}
                            </el-form-item>
                            <!-- <el-form-item label="绑定设备：">
                                {{ruleForm.equipment}}
                            </el-form-item> -->
                            <el-form-item label="产品图片：" style="width:500px">
                                <span v-if="manufacture.productUrl == ''"></span>
                                <img v-else :src="$store.state.imageUrls+manufacture.productUrl" width="150" @click="handlecheck(manufacture.productUrl)" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="检测管理" name="检测管理" v-if="ifshow">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="检品批次：">
                                {{detection.batch}}
                            </el-form-item>
                            <el-form-item label="入库类型：">
                                {{detection.type}}入库
                            </el-form-item>
                            <el-form-item label="状态：">
                                {{detection.isCheck == 0?'未检测':'已检测'}}
                            </el-form-item>
                            <el-form-item label="检测机构：">
                                {{detection.organization}}
                            </el-form-item>
                            <el-form-item label="检测依据：">
                                {{detection.standard}}
                            </el-form-item>
                            <el-form-item label="检测结果：">
                                {{detection.detectionResult == 1?'合格':'不合格'}}
                            </el-form-item>
                            <el-form-item label="检测报告：" style="width:500px">
                                <span v-for="item in sceneUrls" :key="item">
                                    <span v-if="item == ''"></span>
                                    <span v-else>
                                        <a v-if="urlShow" :href="$store.state.imageUrls+item" target="_blank">{{$store.state.imageUrls+item}}</a>
                                        <img v-else :src="$store.state.imageUrls+item" width="150" @click="handlecheck(item)" />
                                    </span>
                                </span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="入库时间：">
                                {{detection.time}}
                            </el-form-item>
                            <!-- <el-form-item label="数量：">
                                {{detection.totalNum}}{{detection.units}}
                            </el-form-item> -->
                            <el-form-item label="检测负责人：">
                                {{detection.userName}}
                            </el-form-item>
                            <el-form-item>
                                &nbsp;&nbsp;
                            </el-form-item>
                            <el-form-item label="检测时间：">
                                {{detection.time}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane v-if="switchHeadTab=='生产系统'" label="颗粒包装" name="颗粒包装">
                    <el-row class="demo-ruleForm">
                        <el-col :span="12">
                            <el-form-item label="产品类型：">
                                {{particlePacking.materialType}}
                            </el-form-item>
                            <el-form-item label="存货代码：">
                                {{particlePacking.inventoryCode}}
                            </el-form-item>
                            <el-form-item label="生产日期：">
                                {{particlePacking.time}}
                            </el-form-item>
                            <el-form-item label="生产批号：">
                                {{particlePacking.batch}}
                            </el-form-item>
                            <el-form-item label="实际产量：">
                                {{manufacture.surplusNumber}}{{manufacture.units}}
                            </el-form-item>
                            <el-form-item label="投料品名：">
                                {{manufacture.breedName}}
                            </el-form-item>
                            <el-form-item label="投入量：">
                                {{particlePacking.scUseNum}}{{particlePacking.scUseNumUnits}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="名称：">
                                {{particlePacking.breedName}}
                            </el-form-item>
                            <el-form-item label="发药机编码：">
                                {{particlePacking.dispenserCode}}
                            </el-form-item>
                            <el-form-item label="有效期至">
                                {{particlePacking.deadLine}}
                            </el-form-item>
                            <el-form-item label="生产负责人：">
                                {{particlePacking.principalUser}}
                            </el-form-item>
                            <el-form-item label="仓库：">
                                {{particlePacking.warehouse}}
                            </el-form-item>
                            <el-form-item label="投料批号：">
                                {{manufacture.batch}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
            <el-form-item class="footerFixed">
                <el-button type="primary" @click="backPage">返回</el-button>
            </el-form-item>
        </el-form>
        <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
    </div>
</template>

<script>
import BigImg from '../../../common/BigImg.vue';
import {search_getMsg,recall_findByBzBatch} from "@/request/api";
import { mapState } from 'vuex';
export default {
    components: {
        BigImg
    },
    data() {
        return {
            ifshow:true,
            activeName: '原料入库',
            code: '',
            batch: '',
            tableData: [],
            ruleForm: {},
            manufacture: {},
            detection: {},
            particlePacking: {},
            sceneUrls: [],
            imgSrc: '',
            showImg: false
        };
    },
    computed: {
        ...mapState(['switchHeadTab'])
    },
    methods: {
        backPage () {
            this.$router.go(-1);
            // this.$store.commit('setPagNum',this.$route.query.page)
            // this.$store.commit('setStorName',this.materialTypeStor)
        },
        handlecheck(row){
            this.showImg = true;
　　　　　　 // 获取当前图片地址
　　　　　　 this.imgSrc = this.$store.state.imageUrls + row;
        },
        viewImg(){
            this.showImg = false;
        },
        init() {
            search_getMsg(this.code).then((res) =>{
                const searchMsg = JSON.parse(res.data.searchMsg)
                // 原料入库
                this.tableData = searchMsg.materialList
                // 生产管理
				this.particlePacking = searchMsg.particlePacking
                this.manufacture = searchMsg.manufacture
                // console.log(this.manufacture,111)
                // 检测管理
                this.detection = searchMsg.detection
                // console.log(this.detection,111)
                if (this.detection.type == '生产') {
                    this.detection.batch = this.manufacture.batch
                } else if(this.detection.type == '原料') {
                    for (let i = 0; i < searchMsg.materialList.length; i++) {
                        const element = searchMsg.materialList[i].id;
                        if (this.detection.relevanceId == element) {
                            this.detection.batch = searchMsg.materialList[i].inBatch
                        }
                    }
                } else if(this.detection.type == '包装'){
                    this.detection.batch = searchMsg.particlePacking.batch
                }
                // 颗粒包装
                // this.particlePacking = searchMsg.particlePacking
				console.log(this.particlePacking)
                // console.log(this.particlePacking,111)
            })
        },
        init1() {
            recall_findByBzBatch({
                batch: this.batch
            }).then((res) =>{
                const searchMsg = res.data
                // 原料入库
                this.tableData = searchMsg.materialList
                // 生产管理
                this.manufacture = searchMsg.manufacture


				this.particlePacking = searchMsg.particlePacking
                // console.log(this.manufacture,111)
                // 检测管理
                this.detection = searchMsg.detection
                if(this.detection == [] || this.detection == "" || this.detection == null){
                    this.ifshow = false
                }else{
                    this.ifshow = true
                }
                // console.log(this.detection,111)
                if (this.detection.type == '生产') {
                    this.detection.batch = this.manufacture.batch
                } else if(this.detection.type == '原料') {
                    for (let i = 0; i < searchMsg.materialList.length; i++) {
                        const element = searchMsg.materialList[i].id;
                        if (this.detection.relevanceId == element) {
                            this.detection.batch = searchMsg.materialList[i].inBatch
                        }
                    }
                } else if(this.detection.type == '包装'){
                    this.detection.batch = searchMsg.particlePacking.batch
                }
                // 颗粒包装

                console.log(this.particlePacking,111)
            })
        },
        handleClick() {

        },
        // 查看
        handleView(index,row){
            this.$router.push({
                path: '/materialCheck/viewMaterialCheck',
                query: { id: row.id }
            });
        },
    },
    mounted () {
        if (this.$route.query.batch) {
            this.batch = this.$route.query.batch
            this.init1();
        } else if (this.$route.query.code) {
            this.code = this.$route.query.code
            this.init();
        }
    },
};
</script>


<style lang="less" scoped>

.box{
    width: 85%;
    margin-bottom: 15px;
    dl{
        margin-bottom: 20px;
        overflow: hidden;
        dt{ margin-bottom: 5px; font-size: 14px;}
        dd{ font-weight: 500; font-size: 12px; float: left; width: 50%; line-height: 24px;}
    }
    dl:last-child{
        margin-bottom: 0;
    }
    .el-col-11{
        height: 200px;
        overflow-y: auto;
        margin-left: 10px;
        border-left: 1px solid #EBEEF5;
        padding-left: 10px;
        p{ color: #303133;}
        .record-tip-con{
            padding-top: 10px;
        }
    }
}
</style>
